<script src="./script.js"></script>
<style src="./style.css"></style>
<template>
  <div class="app-container">

    <div class="filter-container">
      <el-select v-model="type" class="filter-item" placeholder="业务类型" style="width:130px" @change="handleSearch">
        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>

      <el-input v-model="remark" placeholder="备注" clearable style="width: 600px;" class="filter-item" @input="handleSearch" />

      <el-button class="filter-item" type="primary" @click="handleCreate">保存</el-button>

    </div>

    <el-table
      :data="tableList"
      border
      size="mini"
    >
      <el-table-column
        label="序号"
        type="index"
        width="50"
        align="center"
      >
      </el-table-column>

      <el-table-column
        label=""
        width="80"
        align="center"
      >
        <template scope="{row,$index}">
          <el-tag type="success" effect="dark" size="mini" @click="addLine($index)">+</el-tag>
          <el-tag type="danger" effect="dark" size="mini" @click="removeLine($index)">-</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="parent_category"
        label="一级分类"
        width="120"
      >
        <template slot-scope="{row,$index}">
          {{ row.parent_category }}
        </template>
      </el-table-column>

      <el-table-column
        prop="category"
        label="二级级分类"
        width="120"
      >
        <template slot-scope="{row,$index}">
          {{ row.category }}
        </template>
      </el-table-column>

      <el-table-column
        prop="name"
        label="名称"
      >
        <template slot-scope="{row,$index}">
          <el-link :type="row.item_id ? 'primary' : 'info'" @click="showSelectDialog($index)">{{row.name ? row.name : '点击选择'}}</el-link>
        </template>
      </el-table-column>

      <el-table-column
        prop="price"
        label="入库单价"
        width="120"
        align="center"
      >
        <template slot-scope="{row,$index}">
          <el-input v-model="row.price" @input="updateTotal($index)"></el-input>
        </template>
      </el-table-column>

      <el-table-column
        prop="quantity"
        label="数量"
        width="120"
        align="center"
      >
        <template slot-scope="{row,$index}">
          <el-input v-model="row.quantity" @input="updateTotal($index)"></el-input>
        </template>
      </el-table-column>

      <el-table-column
        prop="total"
        label="小计"
        width="120"
        align="center"
      >
      </el-table-column>

    </el-table>

    <el-dialog :visible.sync="itemVisible" top="10" width="100%">
      <div class="filter-container">
        <el-input v-model="listQuery.product_name" placeholder="请输入 名称 | 规格" clearable style="width: 200px;" class="filter-item" @input="handleSearch" />
        <el-select v-model="listQuery.category" placeholder="一级分类" class="filter-item" style="width: 130px" @change="handleSelectChange">
          <el-option v-for="item in categoryOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="listQuery.sub_category" placeholder="二级分类" class="filter-item" style="width: 130px" @change="handleSearch">
          <el-option v-for="item in subCategoryOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="selectConfirm">
          选中并关闭
        </el-button>
      </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        border
        fit
        size="mini"
        :highlight-current-row="false"
        height="600"
        style="width: 100%;"
      >
        <el-table-column label="ID" prop="id" align="center" width="80">
          <template slot-scope="{row}">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="分类" width="100px">
          <template slot-scope="{row}">
            <div><el-link type="primary">{{ row.category.parent.name }}></el-link></div>
            <div><el-link type="danger">{{ row.category.name }}</el-link></div>
          </template>
        </el-table-column>
        <el-table-column label="名称" width="170px">
          <template slot-scope="{row}">
            <span class="link-type">{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="规格">
          <template slot-scope="{row}">
            <div
              v-for="(item) in row.items"
              :key="item.index"
              @click="select(row,item)"
              style="padding:3px;"
              v-bind:style="{border: checkedList.indexOf(item.code) > -1 ? '1px solid red' : '1px solid white'}"
            >
              <div style="cursor: pointer">
                <el-tag
                  type="success"
                >
                  规格名称：{{ item.name }}
                </el-tag>
                <el-tag
                  type="primary"
                >
                  售价：{{ item.price }}
                </el-tag>
                <el-tag
                  type="primary"
                >
                  会员价：{{ item.member_price }}
                </el-tag>
                <el-tag
                  type="danger"
                >
                  采购价：{{ item.purchase_price }}
                </el-tag>
                <el-tag>
                  库存：{{ item.stock }}
                </el-tag>
              </div>
            </div>
          </template>
        </el-table-column>

      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </el-dialog>

  </div>
</template>
